import React, { useState, useEffect, useCallback } from "react";
import { Modal, Alert, Form, Radio, Button, Upload, Row, Image, Col, message } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import Iconfont from "@/components/IconFont";
import { getImportTemplateUrl } from "../service";
import { useImportTask } from "@/views/hooks/useImportTask";
import { SimpleTable } from "@/views/components/SearchTable/index";
import ProgressModal from "@/views/components/UIModal/ProgressModal";
import ImportResultModal from "@/views/components/UIModal/ImportResultModal";
const { Dragger } = Upload;

const ActionExcelImportProductsModal = ({ onCancel }) => {
	const [visible, setVisible] = useState();
	const [form] = Form.useForm();
	const [list, setList] = useState([]);
	const { percent, step, result, handleDownload, startTask, clearTimer } = useImportTask();
	const tableKey = "id";

	const [open, setOpen] = useState(false);

	useEffect(() => {
		if (step.first === true) {
			setVisible("ProgressModal");
		}
		if (step.second === true) {
			setVisible("ImportResultModal");
		}
		if (step.first === false || step.second === false || step.third === true) {
			onCancel();
		}
	}, [step]);

	useEffect(() => {
		let list = [
			{
				skuCode: "A1235S3",
				skuName: "包邮卡+神龙卡",
				skuAbbreviation: "拉轰",
				retailPrice: "20",
				costPrice: "30",
				tagPrice: "12",
				price1: "12",
				price2: "12",
				price3: "12",
				image: "",
				note: "12",
				skuGoodsName: "1235S341",
				num: "1"
			},
			{
				skuGoodsName: "1235S341",
				num: "1"
			},
			{
				skuCode: "A1235S3",
				skuName: "包邮卡+神龙卡",
				skuAbbreviation: "拉轰",
				retailPrice: "20",
				costPrice: "30",
				tagPrice: "12",
				price1: "12",
				price2: "12",
				price3: "12",
				image: "",
				note: "12",
				skuGoodsName: "1235S341",
				num: "1"
			},
			{
				skuGoodsName: "1235S341",
				num: "1"
			}
		];
		setList(list);
		setOpen(true);
	}, []);

	const columns = [
		{
			name: "组合编码",
			code: "skuCode"
		},
		{
			name: "商品名称",
			code: "skuName"
		},
		{
			name: "组合简称",
			code: "skuAbbreviation"
		},
		{
			name: "零售价",
			code: "retailPrice"
		},
		{
			name: "成本价",
			code: "costPrice"
		},
		{
			name: "市场|吊牌价",
			code: "tagPrice"
		},
		{
			name: "其他价格1",
			code: "price1"
		},
		{
			name: "其他价格2",
			code: "price2"
		},
		{
			name: "其他价格3",
			code: "price3"
		},
		{
			name: "其他价格4",
			code: "price4"
		},

		{
			name: "图片",
			code: "image",
			render: (value, record, i) => <Image width={60} src={value} />
		},
		{
			name: "组合商品备注",
			code: "note"
		},
		{
			name: "商品编码",
			code: "skuGoodsName"
		},
		{
			name: "数量",
			code: "num"
		}
	];
	const [radio1Value, setRadio1Value] = useState(0);
	const [radio2Value, setRadio2Value] = useState(0);
	// const [radio3Value, setRadio3Value] = useState(0);

	const onRadioChange = (e, v) => {
		if (v == 1) {
			setRadio1Value(e.target.value);
		} else if (v == 2) {
			setRadio2Value(e.target.value);
		} else if (v == 3) {
			// setRadio3Value(e.target.value);
		}
	};
	const [file, setFile] = useState(null);
	const DraggerProps = {
		name: "file",
		maxCount: 1,
		multiple: true,
		action: "",
		onChange(info) { },
		onDrop(e) { },
		beforeUpload(f) {
			const isLt20MB = f.size / 1024 / 1024 < 20;
			if (!isLt20MB) {
				message.error(`文件大小不能超过20MB!`);
				return false;
			} else {
				setFile(f);
			}
			return false;
		}
	};
	const getTemplateUrl = () => {
		getImportTemplateUrl({ taskType: 1201 }).then(res => {
			const { data, msg: msg1, message: msg2 } = res;
			if (data && typeof data === "string" && String(data).startsWith("http")) {
				window.open(data);
			} else {
				message.error(msg1 || msg2 || "下载文件失败");
			}
		});
	};
	const handleOk = useCallback(() => {
		console.log(file, "file");
		if (!file) {
			message.warning("请选择要导入的Excel文件");
			return;
		}
		const businessParam = JSON.stringify({ isBlank: radio2Value, isRenew: radio1Value });

		const formData = new FormData();
		formData.append("file", file);
		formData.append("taskType", 1201);
		formData.append("businessParam", businessParam);

		startTask(formData);
	}, [file, radio1Value, radio2Value]);

	return (
		<CommonModal
			title={{ title: "Excel导入组合装信息" }}
			open={open}
			className="views-table-dialog"
			width="968px"
			okText="保存"
			onCancel={onCancel}
			onOk={handleOk}
		>
			<Alert
				showIcon
				message="导入支持：修改组合商品零售价、成本价、虚拟库存等，您可以点击下载模板规范填写，组合商品编码、商品编码、数量为必填，无则按子商品总和。"
				action={
					<Button
						type="primary"
						ghost
						style={{ marginLeft: 10 }}
						onClick={() => {
							getTemplateUrl({ taskType: 1201 });
						}}
					>
						下载模板
					</Button>
				}
				type="info"
			/>
			<div className="sectionContent">
				<Form form={form}>
					<Row gutter={[12, 6]}>
						<Col span={24}>
							<Form.Item label="导入时如果存在对应组合商品编码的商品资料，则：" name="status1">
								<Radio.Group
									onChange={e => onRadioChange(e, 1)}
									defaultValue={0}
									value={radio1Value}
									style={{ marginLeft: "10px" }}
								>
									<Radio value={0}>跳过，不处理</Radio>
									<Radio value={1}>全部更新</Radio>
								</Radio.Group>
							</Form.Item>
						</Col>
					</Row>
					{/* <Row gutter={[12, 6]}>
							<Col span={24}>
								<Form.Item label="导入时如果值不填,则：" name="status2">
									<Radio.Group
										onChange={e => onRadioChange(e, 2)}
										defaultValue={0}
										value={radio2Value}
										style={{ marginLeft: "10px" }}
									>
										<Radio value={0}>跳过，不处理</Radio>
										<Radio value={1}>全部更新</Radio>
									</Radio.Group>
								</Form.Item>
							</Col>
						</Row> */}
					<Row gutter={[12, 6]}>
						<Col span={24}>
							<Form.Item label="当导入的组合装编码是已存在的系统商品资料时,则禁止导入" name="status"></Form.Item>
						</Col>
					</Row>
					<Row gutter={[12, 6]}>
						{/* <Col span={24}>
								<Form.Item label="当导入的子商品编码是禁用的，则：" name="status3">
									<Radio.Group
										onChange={e => onRadioChange(e, 3)}
										defaultValue={2}
										value={radio3Value}
										style={{ marginLeft: "10px" }}
									>
										<Radio value={1}>跳过，不处理</Radio>
										<Radio value={2}>全部更新</Radio>
									</Radio.Group>
								</Form.Item>
							</Col> */}
						<Col span={24}>
							<div className="views-container">
								<SimpleTable
									key={tableKey}
									mounted={false}
									{...{
										tableKey,
										rowKey: "DetailButton2131",
										dataSource: list,
										columns: columns,
										footer: false
									}}
								/>
							</div>
						</Col>
					</Row>
					<>
						<div
							className="sectionContent"
							style={{ background: "white", borderLeft: 0, borderTop: 0, padding: 0, marginTop: 16 }}
						>
							<Dragger {...DraggerProps}>
								<p className="ant-upload-drag-icon">
									<Iconfont type="iconExcel" style={{ fontSize: 40 }} />
								</p>
								<p>点击或将文件拖拽到这里上传,只支持Excel文件</p>
								<p className="light-gray">最大20mb，单次最多10条商品</p>
							</Dragger>
						</div>
					</>
				</Form>
			</div>
			<ProgressModal
				visible={visible === "ProgressModal"}
				type="progress"
				percent={percent}
				title="导入更新商品"
				msg="正在导入商品，请等待..."
				skip
				onCancel={() => {
					{
						onCancel();
						clearTimer();
					}
				}}
			/>
			<ImportResultModal
				visible={visible === "ImportResultModal"}
				result={result}
				handleExportFailed={handleDownload}
				handleCancel={onCancel}
			/>
		</CommonModal>
	);
};
export default ActionExcelImportProductsModal;
